<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="个人申请与审核信息" name="first"></el-tab-pane>
      <el-tab-pane label="集体申请与审核信息" name="second"></el-tab-pane>
    </el-tabs>
    <div class="filter-container">
      <el-form :inline="true" label-position="right" label-width="90px">
        <el-form-item label="姓名">
          <el-input v-model="listQuery.applicantName" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="listQuery.applicantNum" placeholder="身份证号" />
        </el-form-item>
        <el-form-item label="复垦类型">
          <el-select placeholder="复垦类型" v-model="listQuery.reclaimTypeId" clearable>
            <!-- <el-option label="区县级" value="DISTRICT" />
            <el-option label="市级" value="CITY" />-->
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="状态" v-model="listQuery.auditStatus" clearable>
            <!-- <el-option label="区县级" value="DISTRICT" /> -->
            <!-- <el-option label="市级" value="CITY" /> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="changePage(1)" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="filter-container">
      <router-link :to="{ path: '/implementNcjsydfk/sqyssxx/personApplyCheck/add' }">
        <el-button class="filter-item" type="primary" icon="el-icon-plus">添加</el-button>
      </router-link>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="applyNum" label="申请编号"></el-table-column>
      <el-table-column prop="applicantName" label="姓名"></el-table-column>
      <el-table-column prop="applicantNum" label="身份证号码"></el-table-column>
      <el-table-column prop="address" label="通讯地址"></el-table-column>
      <el-table-column prop="mobilePhone" label="手机号码"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="{ path: '/implementNcjsydfk/sqyssxx/personApplyCheck/applyDetail', query: { id: scope.row.landId } }">
            <el-button size="mini" type="primary">申请详情</el-button>
          </router-link>
          <router-link :to="{ path: '/implementNcjsydfk/sqyssxx/personApplyCheck/checkDetail', query: { id: scope.row.landId } }">
            <el-button size="mini" style="margin-left: 10px;" type="primary">审核详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination @current-change="changePage" :page-size="listQuery.size" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/project/fksqtc/personApplyCheck";
import axios from "axios";

export default {
  filters: {},
  data() {
    return {
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        applicantName: null,
        applicantNum: null,
        reclaimTypeId: null,
        auditStatus: null
      },
      activeName:'first'
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    //切换申请
    handleClick(tab, event){
      console.log(this.activeName)
      if(this.activeName=='second'){
        this.$router.push({
          path:'/implementNcjsydfk/sqyssxx/groupApplyCheck'
        })
      }
    },
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery)
        .then(res => {
          this.listLoading = false;
          this.list = res.data.rows;
          this.total = res.data.total;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    changePage(page) {
      this.listQuery.page = page;
      this.fetchData();
    }
  }
};
</script>
